import React, { useCallback, useEffect, useState } from "react";
import { NavBar } from 'antd-mobile'
import { useNavigate } from "react-router-dom";
import Header from './Header/header'
import images from './img/images'
import './Vpcss.css'
import axios from 'axios'
const Vpcc = () => {
    const navigate = useNavigate();
    const [data, setData] = useState({})
    const [checked, setChecked] = useState(null);
    const back = () => {
        navigate('/index/mine')
    }
    let NM = localStorage.getItem('user')
    const getData = useCallback(() => {
        axios.get('http://localhost:3009/VPCC', {
            params: {
                kweyword: NM
            }
        }).then(res => {
            console.log(res.data.data);
            setData(res.data.data);
        })
    }, [NM])
    useEffect(() => {
        getData()
    }, [getData])


    return (
        <>
            <div className="vpcc">
                <div style={{ height: '50px' }}>
                    <Header></Header>
                </div>
                <div>
                    <NavBar onBack={back}>个人资料</NavBar>
                    <hr />
                    <div className="vpcc-content">
                        <span>
                            头像
                        </span>
                        <div>
                            <span><img src={images.img1} alt="" className="vpcc-img" /></span>
                            <span><img src={images.img2} alt="" className="vpcc-img1" /></span>
                        </div>
                    </div>
                    <hr />
                    <div className="vpcc-content">
                        <span>
                            昵称
                        </span>
                        <div>
                            {data.Nickname}
                        </div>
                    </div>
                    <hr />
                    <div className="vpcc-content">
                        <span>
                            姓名
                        </span>
                        <div>
                            <span>{data.NAME}</span>
                        </div>
                    </div>
                    <hr />
                    <div className="vpcc-content">
                        <div>
                            <span style={{ color: 'red' }}>*</span>联系电话
                        </div>
                        <div>
                            <span>{data.Telpale}</span>
                        </div>
                    </div>
                    <hr />
                    <div className="vpcc-content">
                        <div>
                            <span style={{ color: 'red' }}>*</span>性别
                        </div>
                        <div>
                            <input type="radio" value="男" name="sex" checked={checked} onChange={() => setChecked(true)} />男
                            <input type="radio" value="女" name="sex" checked={!checked} onChange={() => setChecked(false)} />女
                        </div>
                    </div>
                    <hr />
                    <div className="vpcc-footer">
                        <span>
                            孩子姓名
                        </span>
                        <div>
                            <span>{data.ChildRen}</span>
                        </div>
                    </div>
                    <hr />
                    <div className="vpcc-footer">
                        <span>
                            与孩子关系
                        </span>
                        <div>
                            <span>{data.Ship}</span>
                        </div>
                    </div>
                    <div>
                        <button className="vpcc-btn">保存</button>
                    </div>
                </div>
            </div>
        </>
    )
}
export default Vpcc;